<template>
  <div class="setUp">
    <Header />
    <div class="w">
      <Breadcrumb :breadcrumbs="breadcrumbs" />
      <div class="panel">
        <div class="item-title clearfix">
          <div class="name fl">{{$t('set.account_safily')}}</div>
        </div>
        <div class="item-content">
          <div class="item clearfix">
            <i class="icon"></i>
            <div class="fl">
              <span class="item-name">{{$t('set.login_email')}}</span>
              <span v-if="isBingEmail" class="sub">({{$t('set.already_binging')}})</span>
            </div>
            <div class="fr">
              <span v-if="isBingEmail" class="sub">{{privateEmail}}</span>
              <button class="btn" v-else  @click="openDialog('bindEmail')">{{$t('btn.immediately')}}</button>
            </div>
          </div>
          <div class="item clearfix">
            <i class="icon"></i>
            <div class="fl">
              <span class="item-name">{{$t('set.tel_phone')}}</span>
              <span v-if="tel" class="sub">({{$t('set.already_binging')}})</span>
            </div>
            <div class="fr">
              <template v-if="tel">
                <span class="sub">{{privateTel}}</span>
                <button @click="openDialog('changeBindPhone')" class="btn">{{$t('set.change_binding')}}</button>
              </template>
              <button @click="openDialog('bindPhone')" class="btn" v-else>{{$t('btn.immediately')}}</button>
            </div>
          </div>
          <div class="item clearfix">
            <i class="icon"></i>
            <div class="fl">
              <span class="item-name">{{$t('set.login_pwd')}}</span>
            </div>
            <div class="fr">
              <span class="sub">********</span>
              <button @click="openDialog('modifyPwd')" class="btn">{{$t('set.update_pwd_btn')}}</button>
            </div>
          </div>
          <div class="item clearfix">
            <i class="icon"></i>
            <div class="fl">
              <span class="item-name">{{$t('set.login_tel_verify')}}</span>
              <span v-if="phoneVerify" class="sub">({{$t('set.already_open')}})</span>
            </div>
            <div class="fr">
              <button @click="openTogglePhoneVerify" class="btn">{{$t(phoneVerify ? 'set.close_verofy_btn' : 'set.verify_btn')}}</button>
            </div>
          </div>
          <div class="item clearfix">
            <i class="icon"></i>
            <div class="fl">
              <span class="item-name">{{$t('set.google_verify_next')}}</span>
              <span v-if="googleVerify" class="sub">({{$t('set.already_open')}})</span>
            </div>
            <div class="fr">
              <button @click="openToggleGoogleVerify" class="btn">{{$t(googleVerify ? 'set.close_verofy_btn' : 'set.verify_btn')}}</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer />
    <el-dialog :visible.sync="showDialog">
      <component v-if="showDialog" ref="dialog" :is="dialogType" :data="dialogParms" class="dialog-box" @toggleDialog="changeShowDialog" />
    </el-dialog>
  </div>
</template>

<script>
import Header from '@/components/Header';
import Footer from '@/components/Footer';
import Breadcrumb from '@/components/Breadcrumb';
import { mapGetters } from 'vuex';
import bindEmail from './dialog/bindEmail';
import changeBindPhone from './dialog/changeBindPhone';
import bindPhone from './dialog/bindPhone';
import modifyPwd from './dialog/modifyPwd';
import togglePhoneVerify from './dialog/togglePhoneVerify';
import toggleGoogleVerify from './dialog/toggleGoogleVerify';

export default {
  components: {
    Header,
    Footer,
    Breadcrumb,
    bindEmail,
    changeBindPhone,
    bindPhone,
    modifyPwd,
    togglePhoneVerify,
    toggleGoogleVerify,
  },
  data() {
    return {
      breadcrumbs: [
        {
          path: '/',
          titleKey: 'router.home',
        },
        {
          path: '/setup',
          titleKey: 'router.setup',
        },
      ],
      showDialog: false,
      dialogType: '',
      dialogParms: {},
    };
  },
  computed: {
    ...mapGetters(['isBingEmail', 'email', 'tel', 'phoneVerify', 'googleVerify', 'googleCode']),
    privateEmail() {
      const reg = /(.{3}).+(.{2}@.+)/g;
      return this.email ? this.email.replace(reg, '$1****$2') : '';
    },
    privateTel() {
      const regPh = /(.{3}).+(.{4})/g;
      return this.tel ? this.tel.replace(regPh, '$1****$2') : '';
    },
  },
  methods: {
    changeShowDialog(obj) {
      this.showDialog = obj.showDialog;
    },
    openDialog(name, dialogParms) {
      this.dialogType = name;
      this.showDialog = true;
      this.dialogParms = dialogParms;
    },
    openTogglePhoneVerify() {
      if (this.tel) {
        this.openDialog('togglePhoneVerify');
      } else {
        this.$confirm(this.$t('set.no_binding_tel'), this.$t('mill.tip'), {
          confirmButtonText: this.$t('btn.binding'),
          cancelButtonText: this.$t('btn.cancel'),
          type: 'warning',
        }).then(() => {
          this.openDialog('bindPhone');
        }).catch(() => {});
      }
    },
    openToggleGoogleVerify() {
      if (this.googleCode) {
        this.openDialog('toggleGoogleVerify');
      } else {
        this.$router.push('/verifier');
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.setUp {
  .panel {
    background-color: #ffffff;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
    border: solid 1px #e0e0e0;
    overflow: hidden;
    border-radius: 3px;
    .item-title {
      height: 50px;
      padding: 13px 20px;
      background-color: #f9f9f9;
      box-shadow: inset 0px -1px 0px 0px #f2f2f2;
      font-size: 12px;
      line-height: 24px;
      .name {
        color: #333333;
      }
    }
    .item-content {
      padding: 0 80px 150px;
      .item {
        padding: 70px 0 44px 70px;
        height: 150px;
        border-bottom: 1px solid #cccccc;
        position: relative;
        line-height: 36px;
        .icon{
          position: absolute;
          left: 0;
          display: block;
        }
        &:nth-of-type(1) {
          .icon{
            width: 48px;
            height: 40px;
            top: 70px;
            background: url(../../assets/images/setup/icon-1.png) no-repeat;
          }
        }
        &:nth-of-type(2) {
          .icon{
            width: 40px;
            height: 53px;
            top: 61px;
            left: 3px;
            background: url(../../assets/images/setup/icon-2.png) no-repeat;
          }
        }
        &:nth-of-type(3) {
          .icon{
            width: 43px;
            height: 48px;
            top: 65px;
            left: 2px;
            background: url(../../assets/images/setup/icon-3.png) no-repeat;
          }
        }
        &:nth-of-type(4) {
          .icon{
            width: 43px;
            height: 52px;
            top: 62px;
            left: 2px;
            background: url(../../assets/images/setup/icon-4.png) no-repeat;
          }
        }
        &:nth-of-type(5) {
          .icon{
            width: 48px;
            height: 48px;
            top: 65px;
            background: url(../../assets/images/setup/icon-5.png) no-repeat;
          }
        }
        .item-name {
          color: #70c1b3;
          font-size: 24px;
          margin-right: 10px;
        }
        .sub{
          color: #999;
          font-size: 14px;
        }
        .fr{
          .btn{
            margin-left: 20px;
          }
        }
        .btn {
          width: 120px;
          height: 40px;
          background-color: #70c1b3;
          border-radius: 20px;
          transition: background-color 0.1s ease-in-out;
          color: #fffefe;
          font-size: 16px;
          border: none;
          outline: none;
          &:hover {
            background-color: #8dcdc2;
          }
        }
      }
    }
  }
  /deep/ {
    .el-dialog__wrapper {
      text-align: center;
      .el-dialog {
        display: inline-block;
        width: auto;
        text-align: left;
        .el-dialog__header {
          padding: 0;
        }
        .el-dialog__body {
          padding: 0;
        }
      }
    }
    .dialog-box {
      width: 350px;
      padding: 0 40px;
      .title {
        font-size: 24px;
        color: #70c1b3;
        line-height: 36px;
        padding: 44px 0 15px;
        .sub{
          font-size: 14px;
          color: red;
          margin-left: 5px;
        }
      }
      .row {
        position: relative;
        .code-btn {
          padding: 0 7px;
          position: absolute;
          right: 5px;
          bottom: 20px;
          span {
            line-height: 18px;
          }
        }
      }
      .dialog-footer {
        padding-top: 20px;
        margin-bottom: 48px;
        .el-button {
          width: 100%;
          margin: 0 0 10px;
          font-size: 16px;
          border: none;
          &.empty-btn{
            border: solid 1px #70c1b3;
            color: #70c1b3;
          }
          &:last-of-type {
            margin-bottom: 0;
          }
        }
      }
      small.info {
        color: #70c1b3;
      }
      .mb0 {
        margin-bottom: 0;
      }
      input {
        width: 100%;
        border: none;
        outline: none;
        border-bottom: 1px solid #e4e4e4;
        padding: 10px 5px;
        margin-bottom: 10px;
        border-radius: 0;
        &::-webkit-input-placeholder {
          color: #ccc;
        }
        &:-moz-placeholder {
          color: #ccc;
        }
        &::-moz-placeholder {
          color: #ccc;
        }
        &:-ms-input-placeholder {
          color: #ccc;
        }
      }
    }
  }
}
</style>
